import { CommonSmallTitle } from '../../Assets/Common/SmallTitle'
import { Column } from '@ant-design/plots'
import { complexColumnTemplate } from '../Template'
import { useLocation } from 'react-router-dom'
import { useRef } from 'react'
import { useRequest, useSize } from 'ahooks'
import { ICON } from '../../../../Common/Configure/Icon'
import { Http } from '../../../../Common/Api'
import { useEffect } from 'react'
import { useState } from 'react'
import { ModalBox } from '../../../../Common/Modal/ModalBox'
import { parseURLParams } from '../../../../Common/Configure/Common'
import dayjs from 'dayjs'

const ColorTwo = ['rgba(135, 213, 255, 1)', 'rgba(233, 147, 255, 1)', 'rgba(95, 143, 255, 1)']
const ColorFou = [
    'rgba(135, 213, 255, 1)',
    'rgba(57, 225, 195, 1)',
    'rgba(233, 147, 255, 1)',
    'rgba(95, 143, 255, 1)',
    'rgba(110, 218, 128, 1)',
    'rgba(255, 121, 121, 1)',
    'rgba(92, 103, 255, 1)',
    'rgba(107, 144, 59, 1)',
    'rgba(255, 34, 34, 1)',
    'rgba(255, 0, 204, 1)',
]

const ListOne = [
    { uuid: 1, label: '基本收入', value: 'incomeAmount', unit: '万', icon: 'zongtouzi' },
    { uuid: 2, label: '基本成本', value: 'outlayAmount', unit: '万', icon: 'wuyechengben' },
    { uuid: 3, label: '毛利', value: 'profit', unit: '万', icon: 'IconHoutaiShouyetouzikongjian' },
    { uuid: 4, label: '本年收入抵销', value: 'cancellationIncomeAmount', unit: '万', icon: 'niandugongzuo' },
    { uuid: 5, label: '本年成本抵销', value: 'cancellationOutlayAmount', unit: '万', icon: 'qunian' },
    { uuid: 6, label: '毛利率', value: 'profitRate', unit: '%', icon: 'lishuai' },
]

export const TenOne = () => {
    const ChartTwo = useRef()
    const SizeTwo = useSize(ChartTwo)
    const ChartThr = useRef()
    const SizeThr = useSize(ChartThr)
    const ChartFou = useRef()
    const SizeFou = useSize(ChartFou)

    const { search } = useLocation()
    const { uuid } = parseURLParams(search)

    const [DataOne, setDataOne] = useState()
    const [DataTwo, setDataTwo] = useState()
    const [DataThr, setDataThr] = useState()
    const [DataFou, setDataFou] = useState()

    const { runAsync: getOne } = useRequest(Http, { manual: true, onSuccess: res => setDataOne(res) })
    const { runAsync: getTwo } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(item => {
                data = [
                    ...data,
                    { type: '收入', label: item.incomeTypeName, value: item.outlayAmount || 0 },
                    { type: '成本', label: item.incomeTypeName, value: item.incomeAmount || 0 },
                    { type: '毛利', label: item.incomeTypeName, value: item.profit || 0 },
                ]
            })
            setDataTwo(data)
        },
    })

    const { runAsync: getThr } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(item => {
                data = [
                    ...data,
                    { type: '收入', label: item.incomeTypeName, value: item.outlayAmount || 0 },
                    { type: '成本', label: item.incomeTypeName, value: item.incomeAmount || 0 },
                    { type: '毛利', label: item.incomeTypeName, value: item.profit || 0 },
                ]
            })
            setDataThr(data)
        },
    })

    const { runAsync: getFou } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let data = []
            res.forEach(item => {
                data = [
                    ...data,
                    { type: '收入', label: item.branchCompanyName, value: item.totalMonthIncomeAmount },
                    { type: '税金及附加', label: item.branchCompanyName, value: item.taxAmount },
                    { type: '成本', label: item.branchCompanyName, value: item.totalMonthOutlayAmount },
                    { type: '毛利', label: item.branchCompanyName, value: item.profit },
                    { type: '管理费用', label: item.branchCompanyName, value: item.managementAmount },
                    { type: '销售费用', label: item.branchCompanyName, value: item.saleAmount },
                    { type: '财务费用', label: item.branchCompanyName, value: item.financialAmount },
                    { type: '研发费用', label: item.branchCompanyName, value: item.devAmount },
                    { type: '其他费用', label: item.branchCompanyName, value: item.otherAmount },
                    { type: '利润总额', label: item.branchCompanyName, value: item.totalProfit },
                ]
            })
            setDataFou(data)
        },
    })

    useEffect(() => {
        getOne({ url: 'getJTGJFinancesBasic', data: { OrganizationUuid: uuid } })
        getTwo({ url: 'getJTGJFinancesEmbodyTypeStat', data: { embodyType: 1, OrganizationUuid: uuid } })
        getThr({ url: 'getJTGJFinancesEmbodyTypeStat', data: { embodyType: 2, OrganizationUuid: uuid } })
        getFou({ url: 'getJTGJFinancesProjectStat' })
    }, [getFou, getOne, getThr, getTwo, uuid])

    const [OptionsCall, setOptionsCall] = useState()

    return (
        <>
            <div className="top">
                <CommonSmallTitle title="工建集团成本情况" style={{ marginRight: 16 }}>
                    <div className="one">
                        <div>
                            {ListOne.map(({ uuid, label, value, unit, icon }) => (
                                <div key={uuid}>
                                    {ICON[icon]}
                                    <div>{label}</div>
                                    <div>
                                        {DataOne ? DataOne[value] : 0}
                                        {unit}
                                    </div>
                                </div>
                            ))}
                        </div>
                        <div
                            onClick={() => {
                                setOptionsCall({
                                    type: 'OpenExcel',
                                    data: {
                                        title: '公司报表',
                                        width: 1500,
                                        data: {
                                            save: true,
                                            year: dayjs().year(),
                                            month: dayjs().month() + 1,
                                            url: 'getFinanceSummaryStatExcel',
                                        },
                                    },
                                })
                            }}
                        >
                            公司报表
                        </div>
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按类别集团内统计" style={{ marginRight: 16 }}>
                    <div className="two" ref={ChartTwo}>
                        {SizeTwo && DataTwo && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeTwo,
                                    data: DataTwo,
                                    color: ColorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
                <CommonSmallTitle title="按类别集团外统计">
                    <div className="thr" ref={ChartThr}>
                        {SizeThr && DataThr && (
                            <Column
                                {...complexColumnTemplate({
                                    size: SizeThr,
                                    data: DataThr,
                                    color: ColorTwo,
                                    isGroup: true,
                                    yTitle: '万元',
                                })}
                            />
                        )}
                    </div>
                </CommonSmallTitle>
            </div>
            <CommonSmallTitle title="按公司统计" flex={469}>
                <div className="fou" ref={ChartFou}>
                    {SizeFou && DataFou && (
                        <Column
                            {...complexColumnTemplate({
                                size: SizeFou,
                                data: DataFou,
                                color: ColorFou,
                                isGroup: true,
                                yTitle: '万元',
                            })}
                        />
                    )}
                </div>
            </CommonSmallTitle>
            <ModalBox OptionsCall={OptionsCall} />
        </>
    )
}
